<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Not Found</title>
    <style>
        /* latin-ext */
        @font-face {
            font-family: 'Concert One';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url(https://fonts.gstatic.com/s/concertone/v11/VEM1Ro9xs5PjtzCu-srDqSTsjP6yuQ.woff2) format('woff2');
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        /* latin */
        @font-face {
            font-family: 'Concert One';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url(https://fonts.gstatic.com/s/concertone/v11/VEM1Ro9xs5PjtzCu-srDqSTijP4.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
    </style>
    <style>
        :root {
            font-size: 32px;
        }

        body {
            font-family: 'Concert One', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            background-color: #ffcd00;
            perspective: 2500px;
        }

        h1,
        h2 {
            margin: 0;
            padding: 0;
            position: relative;
        }

        h1 {
            font-size: 10rem;
            color: #fff;
            transform: rotate3d(0, 1, 0, -20deg);
            animation: 5s rotate ease-in-out infinite;
        }

        h2 {
            font-size: 5rem;
            color: #fff;
            letter-spacing: -4px;
            animation: 2.5s not-found ease-in-out infinite;
        }

        h1::before,
        h1::after {
            content: "404";
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        h2::before,
        h2::after {
            content: "Not Found";
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        h1::before {
            color: #009cde;
            animation: 5s offset-1 ease-in-out infinite;
        }

        h1::after {
            color: #003c71;
            animation: 5s offset-2 ease-in-out infinite;
        }

        h2::before {
            color: #009cde;
            animation: 2.5 offset-3 ease-in-out infinite;
        }

        h2::after {
            color: #009cde;
            animation: 2.5 offset-4 ease-in-out infinite;
        }

        img {
            margin-top: 60px;
            width: 100px;
        }

        @keyframes offset-1 {

            0%,
            100% {
                transform: translate3d(15px, 5px, -10px);
            }

            50% {
                transform: translate3d(-15px, 5px, -10px);
            }
        }

        @keyframes offset-2 {

            0%,
            100% {
                transform: translate3d(30px, 10px, -20px);
            }

            50% {
                transform: translate3d(-30px, 10px, -20px);
            }
        }

        @keyframes offset-3 {

            0%,
            100% {
                transform: translate3d(0px, 6px, -10px);
            }

            50% {
                transform: translate3d(0px, -3px, -10px);
            }
        }

        @keyframes offset-4 {

            0%,
            100% {
                transform: translate3d(0px, 12px, -20px);
            }

            50% {
                transform: translate3d(0px, -6px, -20px);
            }
        }

        @keyframes rotate {

            0%,
            100% {
                transform: rotate3d(0, 1, 0, -20deg);
            }

            50% {
                transform: rotate3d(0, 1, 0, 20deg);
            }
        }


        @keyframes not-found {

            0%,
            100% {
                transform: rotate3d(1, 0, 0, -10deg);
            }

            50% {
                transform: rotate3d(1, 0, 0, 10deg);
            }
        }
    </style>
</head>

<body>
    <h1>404</h1>
    <h2>Not Found</h2>

    <a href="https://blog.farmer233.top" target="_blank">
        <img src="./xiaotao.png" alt="xiaotao">
    </a>
</body>

</html>